<template>
    <div class="container">
        <h2>头像</h2>
        <el-upload
        class="avatar-uploader"
        action="http://localhost:8081/uploadHead"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :with-credentials='true'>
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="user">
                <el-input type="text" :disabled="true" v-model="user.username" autocomplete="off">zzy</el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input type="text" v-model="user.sex" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input type="text" v-model="user.age" :disabled="true">21</el-input>
            </el-form-item>
            <el-form-item label="生日">
                <el-input type="text" v-model="user.birthday" :disabled="true">2000-12-02</el-input>
            </el-form-item>
            <el-form-item label="个人简介">
                <el-input type="textarea" autosize v-model="user.intro"></el-input>
            </el-form-item>

            <el-form-item label="修改密码" prop="pass">
                <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="user.checkPass" autocomplete="off"  @blur="checkPassword"></el-input> <p>{{checkPassword() ? '':'两次密码不一致'}}</p>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="registerForm()">提交修改</el-button>
                <el-button @click="resert()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from "axios";
// import dayjs from 'dayjs';
  export default {
    name:"Register",  
    data() {
      return {
        imageUrl: '',
        user: {
          username:'zzy',
          sex:'男',
          age:21,
          birthday:'2000-12-02',
          intro:"",
          password:'',
          checkPass:'',

        }
    }
    },
    methods: {
        getFormData(){
        let formData = new FormData();
        formData.append('username',this.user.username);
        formData.append('password',this.user.password);
        formData.append('sex',this.user.sex);
        formData.append('age',this.user.age);
        formData.append('birthday',this.user.birthday);
        formData.append('intro',this.user.intro);
        return formData;
      },

        registerForm(){
            if (this.checkPassword()) {
                let da = this.getFormData()
                axios.put('http://localhost:8081/updateUserIndo',da).then(res=>{
                    if (res.data.state === 200) {
                        alert('修改成功')
                         axios.get("http://localhost:8081/getUser").then(res=>{
                         this.$store.commit('setUsername',res.data.data)
                        })
                    }
                })
            }else{
                alert('密码不一致')
            }
        },
        resert(){
            this.user.intro = ''
            this.user.password = ''
            this.user.checkPass = ''
        },
        checkPassword(){
        console.log(this.user.password,this.user.checkPass);
        if (this.user.password === this.user.checkPass) {
          return true
        }else{
          return false
        }
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        return isJPG;
      }
    },
    mounted(){
        axios.get(`http://localhost:8081/getUserInfo`).then(res=>{
            console.log(res);
            this.user = res.data.data
            this.imageUrl = res.data.data.head
           
        })
    }
  }
</script>
<style scoped>
.container {
    width:50%;
    margin:70px auto;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>